<template>
<div class="MainCase1">
<Row>
<Col span="21" class="left">
	<Row>
	<Col span="18">
	<span>年份：</span>
  	<Select v-model="yearValue" style="width:150px">
        <Option v-for="year in yearList" :value="year.value" :key="year.value">{{ year.label }}</Option>
    </Select>&nbsp;
	<Button icon="md-add" shape="circle" type="primary" @click="modalCreateAddCase">添加案件</Button>
	</Col>
	<Col span="6"><Input search enter-button placeholder="当事人" @on-search="handleSearch"/>
	</Col>
	</Row>
	<br>
	<Table ref="table" :columns="columns" :data="data" row-key="case_no" 
	:max-height="maxHeight" @on-row-click="handleRowClick" border highlight-row>
		<template #action="{ row, index }">
	      <div class="ty-flex-row-around">
			<Button icon="md-create" type="success" @click="handleEdit(row, index)"></Button> &nbsp;
		    <Button icon="md-trash" type="error" @click="handleDelete(row, index)"></Button>&nbsp;
		    <Button icon="md-eye" type="info" @click="handleDocument(row, index)"></Button>
		  </div>
		</template>
	</Table>
</Col>
<Col span="3" class="right">
	<Steps :current="currentStep" direction="vertical">
        <Step title="案件记录" content="立案审批"></Step>
        <Step title="立案" content="事先告知审批"></Step>
        <Step title="事先告知" content="处罚决定审批"></Step>
        <Step title="处罚决定" content="结案审批"></Step>
        <Step title="结案" content="归档"></Step>
    </Steps>
</Col>
</Row>
<Drawer width="400" :closable="false" v-model="drawer1" >
	<Collapse :model-value="currentStepPanel" :accordion="true">
		<Panel name="0">案件记录
			<template #content>
				<DocButton v-for="n in $store.state.docs.doc0" :key="n.value" 
				:caseInfo="caseInfo" :to="n.value">{{n.text}}</DocButton>
			</template>
		</Panel>
		<Panel name="1">立案
			<template #content>
				<Button icon="ios-more" class="ivu-fr" shape="circle" @click="drawer2=true" type="text">更多</Button>
				<DocButton v-for="n in $store.getters.getDoc1" :key="n.value"
				:caseInfo="caseInfo" :to="n.value">{{n.text}}</DocButton>
			</template>
			<Drawer title="立案" :closable="false" v-model="drawer2" width="300">
				<DocButton v-for="n in $store.getters.getDoc1More" :key="n.value"
				:caseInfo="caseInfo" :to="n.value">{{n.text}}</DocButton>
			</Drawer>
		</Panel>
		<Panel name="2">事先告知
			<template #content>
				<DocButton v-for="n in $store.state.docs.doc2" :key="n.value"
				:caseInfo="caseInfo" :to="n.value">{{n.text}}</DocButton>
			</template>
		</Panel>
		<Panel name="3">处罚决定
			<template #content>
				<DocButton v-for="n in $store.state.docs.doc3" :key="n.value" :name="n.value"
				:caseInfo="caseInfo" :to="n.value">{{n.text}}</DocButton>
			</template>
		</Panel>
		<Panel name="4">结案
			<template #content>
				<DocButton v-for="n in $store.state.docs.doc4" :key="n.value" :name="n.value"
				:caseInfo="caseInfo" :to="n.value">{{n.text}}</DocButton>
			</template>
		</Panel>
	</Collapse>
</Drawer>
<router-view/>
<Modal v-model="modalCreate"  @on-ok="handleModalCreateOK" :styles="{top: '30px'}">
	<template #header>新增案件</template>
	<Form ref="form" :model="formData" :rules="ruleValidate" :label-width="70">
		<FormItem label="程序" required prop="procedure">
			<RadioGroup v-model="formData.procedure">
				<Radio label="一般程序" border></Radio>
				<Radio label="简易程序" border></Radio>
				<Radio label="行政许可" border></Radio>
			</RadioGroup>
		</FormItem>
		<FormItem label="案由" prop="cause_id" >
			<Select v-model="formData.cause_id">
				<Option v-for="item in case_name_range" :value="item.value" :key="item.value">
					{{ item.text }}
				</Option>
			</Select>
		</FormItem>
		<FormItem label="来源" prop="source" >
			<Select v-model="formData.source">
				<Option v-for="item in sourceData" :value="item.value" :key="item.value">
					{{ item.text }}
				</Option>
			</Select>
		</FormItem>
		<FormItem label="地点" prop="address">
			<Input v-model="formData.address" placeholder="请输入案发地点"></Input>
		</FormItem>
		<FormItem label="当事人" prop="party_type">
			<RadioGroup v-model="formData.party_type" type="button" button-style="solid">
				<Radio label="法人" v-width="100"></Radio>
				<Radio label="个人" v-width="100"></Radio>
			</RadioGroup>
		</FormItem>
		<div v-if="formData.party_type==='法人'">
			<FormItem label="营业执照" prop="business_license">
				<Upload ref="upload1" :show-upload-list="false" :on-success="handleUpload1Success" 
				:format="['jpg','jpeg','png']" :max-size="20480" type="drag" 
				name="file" style="display: inline-block;width:90px;"  
				:action="uploadActionBusiness">
				    <div style="width: 90px;height:64px;line-height: 64px;">
				        <Icon type="ios-camera" size="24" v-if="formData.business_license==''"></Icon>
				        <img :src="formData.business_license" height="64" v-else>
				    </div>
				</Upload>
			</FormItem>
			<FormItem label="负责人" prop="legal_representative">
				<Input v-model="formData.legal_representative"></Input>
			</FormItem>
			<FormItem label="联系电话" prop="phone">
				<Input v-model="formData.phone"></Input>
			</FormItem>
			<FormItem label="信用码" prop="reg_num">
				<Input v-model="formData.reg_num"></Input>
			</FormItem>
			<FormItem label="企业名称" prop="enterprise_name">
				<Input v-model="formData.enterprise_name"></Input>
			</FormItem>
			<FormItem label="地址" prop="regist_address">
				<Input v-model="formData.regist_address"></Input>
			</FormItem>
		</div>
		<div v-else>
			<FormItem label="身份证" prop="person_card">
				<Upload ref="upload1" :show-upload-list="false" :on-success="handleUpload2Success" 
				:format="['jpg','jpeg','png']" :max-size="20480" type="drag" 
				name="file" style="display: inline-block;width:90px;"  
				:action="uploadActionPerson">
				    <div style="width: 90px;height:64px;line-height: 64px;">
				        <Icon type="ios-camera" size="24" v-if="formData.person_card==''"></Icon>
				        <img :src="formData.person_card" height="64" v-else>
				    </div>
				</Upload>
			</FormItem>
			<FormItem label="姓名" prop="person_name">
				<Input v-model="formData.person_name"></Input>
			</FormItem>
			<FormItem label="联系电话" prop="person_phone">
				<Input v-model="formData.person_phone"></Input>
			</FormItem>
			<FormItem label="性别" prop="person_gender">
				<Input v-model="formData.person_gender"></Input>
			</FormItem>
			<FormItem label="身份证号" prop="person_id">
				<Input v-model="formData.person_id"></Input>
			</FormItem>
			<FormItem label="出生年月" prop="person_birth">
				<Input v-model="formData.person_birth"></Input>
			</FormItem>
			<FormItem label="住址" prop="person_address">
				<Input v-model="formData.person_address"></Input>
			</FormItem>
		</div>
	</Form>
</Modal>
</div>
</template>
<script>
import config from '@/config'
import {dateUtils} from '@/libs/tools.js'
import DocButton from '@/components/DocButton'
export default{
	data(){
		return {
			yearList:dateUtils.getLast3Years(),
			drawer1:false,
			drawer2:false,
	        currentStep:2,
			caseInfo:{},
	        yearValue:dateUtils.getCurrentYear(),
	        modalCreate:false,
	        data:[],
	        columns:[
	        	{title:'编号',key:'case_no',minWidth:70},
        		{title:'案由',key:'cause_name',minWidth:220,ellipsis:true},
        		{title:'当事人',key:'party_name',minWidth:160,ellipsis:true},
        		{title:'类别',key:'party_type',minWidth:80},
        		{title:'程序',key:'procedure',minWidth:100},
        		{title:'状态',key:'status',minWidth:120},
        		{title:'承办人',key:'legal_name',minWidth:80},
        		{title:'操作',slot:'action',minWidth:160}
	        ],
	        searchKey:'',
			formData:{
				cause_id:1600,//案由
				procedure:'一般程序',
				source:'',//来源
				address:'',//案发地点
				legal_name:'',//经办人
				legal_name2:'',//协办人
				business_license:'',//营业执照照片url
				person_card:'',//身份证照片url
				party_name:'',//当事人
				party_type:'法人',
				enterprise_name:'',
				reg_num:'',
				legal_representative:'',
				phone:'',
				person_phone:'',
				person_id:'',
				person_name:'',
				person_gender:'',
				person_birth:'',
				regist_address:'',
				person_address:''
			},
			ruleValidate:[],
			case_name_range:[],
			sourceData:[{text: '投诉、举报',value:'投诉、举报'},{text: '检查发现',value:"检查发现"},{text: '部门移送',value:"部门移送"}
			,{text: '上级交办',value:"上级交办"},{text: '媒体披露',value:"媒体披露"},{text: '其它',value:"其它"}]
		}
	},
	components: {
		DocButton
    },
	computed: {
        maxHeight(){
          return window.innerHeight-200
        },
		currentStepPanel(){
			return this.currentStep.toString()
		},
		uploadActionPerson(){
			return config.baseUrl+'tangyin/main/mainCase1UploadPerson.action'
		},
		uploadActionBusiness(){
			return config.baseUrl+'tangyin/main/mainCase1UploadBusiness.action'
		}
    },
	methods:{
		handleSearch(value){
			this.searchKey=value
			this.getMainCase1List()
		},
		getMainCase1List(){
		   this.$axios.post("mainCase1List.action",{str2:this.searchKey,int1:this.yearValue})
		   .then(res=>{
				this.data=res.data
		   })
	    },
	    handleRowClick(row,index){
	    	this.currentStep=row["step_code"]
			this.caseInfo=row
	    },
		handleDelete(row,index){
			this.$Modal.confirm({
				title: '确定要删除案件？',
				onOk: () => {
					this.$axios.post("mainCase1CaseDelete.action",{int1:row.case_no}).then(res=>{
						this.$Message.success('删除成功')
						this.getMainCase1List()
					})
				}
			})
		},
		handleEdit(row,index){
			this.modalCreate = true
			this.formData=row
		},
	    handleDocument(row, index){
	    	this.drawer1=true
	    },
		handleMoreStep0(){
			this.drawer2=true
		},
		modalCreateAddCase(){
			this.modalCreate = true
			this.$refs.form.resetFields()
		},
		handleModalCreateOK(){
			this.formData.legal_name=this.$store.state.user.userInfo.uname
			if(this.formData.party_type=='法人'){
				this.formData.party_name=this.formData.enterprise_name
			}else{
				this.formData.party_name=this.formData.person_name
			}
			
			this.$refs.form.validate((valid) => {
				if (valid) {
					let data=this.formData
					this.$axios.post("mainCase1CaseSave.action",data).then(res=>{
						this.$Message.success('保存成功')
						this.modalCreate=false
						this.getMainCase1List()
					})
				}
			})
		},
		handleUpload1Success(res, file, fileList){//营业执照上传成功
			this.formData.business_license=config.baseUrl+res.tarFile
			this.formData.legal_representative=res.legalPerson
			this.formData.enterprise_name=res.companyName
			this.formData.reg_num=res.creditCode
			this.formData.regist_address=res.businessAddress
		},
		handleUpload2Success(res, file, fileList){//身份证上传成功
			this.formData.person_card=config.baseUrl+res.tarFile
			this.formData.person_id=res.idNumber
			this.formData.person_name=res.name
			this.formData.person_address=res.address
			this.formData.person_birth=res.birthDate
			this.formData.person_gender=res.sex
		}
	},
	mounted(){
		this.getMainCase1List()
		this.$axios.post('mainSetting4CauseSelect.action',{}).then(res=>{
			let tmp=res.data
			this.case_name_range= tmp.map(function(item){
				item["text"]=item["value"]+'['+item['text']+']'
				return item;
			})
		})
	},
	beforeRouteUpdate(to,from,next){//路由钩子
		if(from.fullPath=='/main/MainCase1'){
			next()
		}else if(to.fullPath=='/main/MainCase1'){
			this.drawer1=false
			this.drawer2=false
			this.getMainCase1List()
			next()
		}
	}
}
</script>
<style scoped="scoped">
.left{
padding: 16px;
}
.right{
padding: 96px 16px;
}
</style>